<template>
  <el-dropdown trigger="click" @command="handleLanguageChange">
    <el-button link class="lang-btn">
      <el-icon :size="20">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor"
            d="M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35C8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5l3.11 3.11l.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" />
        </svg>
      </el-icon>
      <span>{{ currentLanguageName }}</span>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh" :disabled="currentLanguage === 'zh'">
          中文
        </el-dropdown-item>
        <el-dropdown-item command="en" :disabled="currentLanguage === 'en'">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup name="LangSwitcher">
import { useI18n } from 'vue-i18n'
import { progressStart, progressDone } from "@/utils/nprogress";

const { locale } = useI18n()

const currentLanguage = computed(() => locale.value)
const currentLanguageName = computed(() => currentLanguage.value === 'zh' ? '中文' : 'English')

const handleLanguageChange = (lang) => {
  progressStart()
  locale.value = lang
  localStorage.setItem('lang', lang)
  progressDone()
}
</script>

<style scoped>
.lang-btn {
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.lang-btn span {
  margin-left: 5px;
}
</style>
